<template>
  <div class="inputTi">
    <div :class="['flex', isOptions ? 'inputCIdxs' : 'inputWraps']">
      <el-input
        type="textarea"
        slot="reference"
        :class="['input','refInput', isOptions ? 'cIdxs' : 'cIndesd']"
        v-model="input"
        :placeholder="placeholder"
        @input="inputValChange"
        :disabled="disabled"
        v-trim
      ></el-input>
      <div class="imgBox pr" style="" v-if="fileListNew && fileListNew.length > 0">
        <!-- 显示图片 -->
        <template v-for="(imageUrl, i) in fileListNew">
          <el-image
            v-if="imageUrl"
            class="elImg"
            :key="i"
            :src="define.comUrl + imageUrl"
            :preview-src-list="getImgList(fileListNew)"
          >
          </el-image>
          <template v-if="!disabled">
            <div class="" :key="i">
              <div class="uploadImgs">
                <el-upload
                  :action="define.comUploadUrl + '/' + modular + '/annex'"
                  :show-file-list="false"
                  :on-success="handleSuccess"
                  :headers="uploadHeaders"
                  :multiple="isTitle"
                  :limit="limit"
                  :on-remove="handleRemove"
                  accept="image/*"
                >
                  <i style="cursor: pointer" class="el-icon-plus el-icon-edit"></i>
                </el-upload>
              </div>
              <i class="el-icon-plus el-icon-delete elDeletes" @click="elDeletesClick"></i>
            </div>
          </template>
        </template>
      </div>
      <div class="" v-else>
        <!-- 上传图片 -->
        <div :class="['popoverCon', isOptions ? 'cIdxs' : '']" v-if="!disabled">
          <el-upload
            :action="define.comUploadUrl + '/' + modular + '/annex'"
            :show-file-list="false"
            :on-success="handleSuccess"
            :headers="uploadHeaders"
            :multiple="isTitle"
            :limit="limit"
            :on-remove="handleRemove"
            accept="image/*"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isTitle: {
      type: Boolean,
      default: false,
    },
    idx: {
      type: Number,
      default: 0,
    },
    cIdx: {
      type: Number,
      default: 0,
    },
    isOptions: {
      type: Boolean,
      default: false,
    },
    inputVal: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "",
    },
    fileList: {
      type: Array,
      default: () => [],
    },
    modular: {
      type: String,
      default: "system",
    },
    type: {
      type: String,
      default: "annex",
    },
    isremove: {
      type: Boolean,
      default: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      limit: this.isTitle ? 3 : 1,
      uploadHeaders: { Authorization: this.$store.getters.token },
      input: this.inputVal,
      fileListNew: [],
    };
  },
  computed: {},
  watch: {
    inputVal() {
      this.input = this.inputVal;
    },
    fileList: {
      handler(val) {
        if (val) {
          this.fileListNew = val;
        }
      },
      deep: true,
      immediate: true
    },
  },
  created() {
  },
  mounted() {},
  methods: {
    inputValChange(v) {
      this.$emit("input", v, this.idx, this.cIdx);
    },
    getImgList(list) {
      const newList = list.map((o) => this.define.comUrl + o);
      return newList;
    },
    handleSuccess(res, file) {
      if (res.code == 200) {
        if (this.isTitle) {
          this.fileListNew.push(res.data.url);
        } else {
          this.fileListNew[0] = res.data.url;
        }
        this.$forceUpdate();
        this.$emit("changeImg", res.data.url, this.idx, this.cIdx);
      } else {
        this.$message({ message: res.msg, type: "error", duration: 1500 });
      }
    },
    handleRemove(file, fileList) {
      // this.dialogImageUrl = [...fileList]
    },
    // 删除
    elDeletesClick() {
      this.fileListNew = [];
      this.$emit("changeImg", null , this.idx, this.cIdx);
    },
    
  },
};
</script>
<style lang="scss">
.refInput {
  height: 90px;
  border-radius: 4px;
}
.refInput.cIdxs {
  height: 35px;
}
.refInput.cIndesd textarea {
  height: 90px;
}
.refInput.cIdxs textarea {
  height: 35px;
}
.popoverCon.cIdxs {
  width: 60px;
  height: 35px;
  line-height: 35px;
}
.popoverCon {
  width: 160px;
  height: 90px;
  line-height: 90px;
  background: #F6F8FC;
  // background: red;
  border-radius: 4px;
  text-align: center;
  margin-left: 12px;
}
.popoverCon i {
  color: #536387;
  cursor: pointer;
  font-size: 20px;
}
.inputTi {
  box-sizing: border-box;
}
.flex {
  display: flex;
}
.el-popover {
  min-width: 30px !important;
  font-size: 20px;
}
.inputTi {
  align-items: center;
  .el-input__inner {
    border-color: rgba(255, 255, 255, 0);
    
    &[disabled] {
      background-color: #F5F7FA;
      border-color: #E4E7ED;
      color: #909399;
      cursor: not-allowed;
    }
  }
}

.popoverCon {
  .el-upload {
    font-size: 27px;
    // width: 30px !important;
    // min-width: 30px !important;
    // height: 35px !important;
    // line-height: 35px !important;
  }
}
</style>
<style lang="scss" scoped>
.inputTi {
  width: 100%;
}
.imgBox {
  margin-left: 10px;
}
.pr {
  position: relative;
}
.uploadImgs {
  position: absolute;
  right: 35px;
  top: 10px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  line-height: 20px;
  text-align: center;
  border-radius: 3px;
  font-size: 12px;
}
.elDeletes {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  line-height: 20px;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}
.inputCIdxs .imgBox.pr {
  width: 64px !important;
  height: 40px !important;
}
.inputWraps .imgBox.pr {
  width: 160px !important;
  height: 90px !important;
}
</style>
